<template>
    <header id="header">
    <div id="site-meta">
        <h1 id="site-name">懒回顾</h1>
        <h1 id="site-description">个人博客</h1>
    </div>
    <div id="background">

    </div>
    <navMenu/>
</header>
    <div class="container">
        <router-view/>
    </div>
    <Footer/>
</template>

<script>
    import navMenu from '@/components/navMenu.vue'
    import Footer from '@/components/Footer.vue'
    export default {
        name: "blogIndex",
        components:{navMenu,Footer},
    }
</script>

<style scoped>

.container{
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;


}

#header{
    height: 100%;
}
#background{
    width: 100%;
    height: 100%;
    background: url(http://img.rui61.cn/images/2020/07/05/24CC9824870CDCC4194B2C0EC0097D23.jpg) center center no-repeat;
    background-size: cover;
    z-index: -1;
    position: relative;
}
#site-meta{
    position: absolute;
    top: 25%;
    z-index: 10;
    text-align: center;
    border-radius: .5rem;
    width: 100%;
    padding: 30px 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    color: rgba(255,255,255,.8);
    text-shadow: 0 0 5px #c3c3c3;
}
    #site-name{
        font-weight: 300;
        margin-top: 5px;
        margin-bottom: 7px;
        font-size: 5rem;
    }
</style>